<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>填写手机号</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <style>
        body {
            background-color: #fafafa;
            font-family: Arial, sans-serif;
        }

        .verify-container {
            max-width: 600px;
            margin: 50px auto;
            padding: 30px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .verify-title {
            font-size: 20px;
            color: #333;
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            margin-bottom: 8px;
            color: #333;
        }

        .phone-input-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .country-code {
            width: 100px;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0 10px;
            cursor: pointer;
            position: relative;
        }

        .country-code:after {
            content: '▼';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 12px;
        }

        .phone-input {
            flex: 1;
            height: 40px;
            padding: 0 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .sms-code-group {
            display: flex;
            gap: 10px;
        }

        .sms-input {
            flex: 1;
            height: 40px;
            padding: 0 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .send-code-btn {
            width: 120px;
            height: 40px;
            background: #fff;
            border: 1px solid #ff4d4f;
            color: #ff4d4f;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        .send-code-btn:hover {
            background: #fff1f0;
        }

        .send-code-btn.disabled {
            background: #f5f5f5;
            border-color: #d9d9d9;
            color: #999;
            cursor: not-allowed;
        }

        .button-group {
            display: flex;
            gap: 20px;
            margin-top: 30px;
        }

        .submit-btn {
            flex: 1;
            height: 40px;
            background: #ff4d4f;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

        .submit-btn:hover {
            background: #ff6b6b;
        }

        .cancel-btn {
            flex: 1;
            height: 40px;
            background: #fff;
            border: 1px solid #ddd;
            color: #666;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

        .cancel-btn:hover {
            background: #f5f5f5;
        }

        .error-tips {
            color: #ff4d4f;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
    </style>
</head>
<body>
<div class="verify-container">
    <h2 class="verify-title">填写手机号</h2>
    <form id="phoneVerifyForm">
        <div class="form-group">
            <label class="form-label">手机号</label>
            <div class="phone-input-group">
                <select class="country-code">
                    <option value="+86">+86</option>
                </select>
                <input type="text" class="phone-input" name="phone" placeholder="请输入手机号">
            </div>
            <div class="error-tips" id="phoneError"></div>
        </div>

        <div class="form-group">
            <label class="form-label">短信验证码</label>
            <div class="sms-code-group">
                <input type="text" class="sms-input" placeholder="请输入短信验证码">
                <button type="button" class="send-code-btn" id="sendCodeBtn">发送验证码</button>
            </div>
            <div class="error-tips" id="smsCodeError"></div>
        </div>

        <div class="button-group">
            <button type="submit" class="submit-btn">确定</button>
            <button type="button" class="cancel-btn" id="cancelBtn">返回</button>
        </div>
    </form>
</div>

<script>
    $(function () {
        let countdown = 60;
        let timer = null;

        // 发送验证码
        $('#sendCodeBtn').click(function () {
            if ($(this).hasClass('disabled')) return;

            const phone = $('.phone-input').val().trim();

            // 验证手机号
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                $('#phoneError').text('请输入正确的手机号').show();
                return;
            }

            const $btn = $(this);

            // 发送验证码请求
            $.ajax({
                url: 'SendSms',
                type: 'POST',
                data: {
                    phone: phone
                },
                dataType: "json",
                success: function (res) {
                    if (res.code === '0000') {
                        // 开始倒计时
                        startCountdown($btn);
                        alert('验证码已发送，请注意查收');
                    } else {
                        alert('验证码发送失败，请重试');
                    }
                },
                error: function () {
                    alert('网络错误，请重试');
                }
            });
        });

        // 表单提交
        $('#phoneVerifyForm').submit(function (e) {
            e.preventDefault();

            const phone = $('.phone-input').val().trim();
            const smsCode = $('.sms-input').val().trim();

            // 清除所有错误提示
            $('.error-tips').hide();

            // 验证手机号
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                $('#phoneError').text('请输入正确的手机号').show();
                return;
            }

            // 验证短信验证码
            if (!smsCode) {
                $('#smsCodeError').text('请输入短信验证码').show();
                return;
            }

            // 验证短信验证码
            $.ajax({
                url: 'ValSmsCode',
                type: 'POST',
                data: {
                    phone: phone,
                    valCode: smsCode
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === '0000') {
                        // 验证成功，更新手机号
                        updatePhoneNumber(phone);
                    } else {
                        $('#smsCodeError').text('验证码错误，请重新输入').show();
                    }
                },
                error: function () {
                    alert('网络错误，请重试');
                }
            });
        });

        // 更新手机号
        function updatePhoneNumber(phone) {
            $.ajax({
                url: 'updatePhone',
                type: 'POST',
                data: {
                    phone: phone
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === '0000') {
                        alert('手机号修改成功！');
                        // 跳转到首页
                        window.location.href = 'My_fellow_traveler.jsp#profile-info';
                    } else {
                        alert('手机号更新失败：' + (res.message || '请重试'));
                    }
                },
                error: function () {
                    alert('网络错误，请重试');
                }
            });
        }

        // 倒计时函数
        function startCountdown($btn) {
            countdown = 60;
            $btn.addClass('disabled');
            $btn.text('重新获取(' + countdown + 's)');

            clearInterval(timer);
            timer = setInterval(() => {
                countdown--;
                if (countdown > 0) {
                    $btn.text('重新获取(' + countdown + 's)');
                } else {
                    clearInterval(timer);
                    $btn.removeClass('disabled');
                    $btn.text('发送验证码');
                }
            }, 1000);
        }

        // 返回按钮
        $('#cancelBtn').click(function () {
            window.location.href = 'Info.jsp';
        });

        // 输入框获得焦点时隐藏错误提示
        $('input').focus(function () {
            $(this).closest('.form-group').find('.error-tips').hide();
        });

        // 输入框输入时验证
        $('.phone-input').on('input', function () {
            const phone = $(this).val().trim();
            if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
                $('#phoneError').text('请输入正确的手机号').show();
            } else {
                $('#phoneError').hide();
            }
        });

        // 页面卸载时清除定时器
        $(window).on('unload', function () {
            if (timer) {
                clearInterval(timer);
            }
        });
    });
</script>
</body>
</html>